<template>
  <div id="paymentReqAdd" style="margin-bottom: 40px;">
    <div class="paymentReqAdd">
      <el-form
        label-width="120px"
        :model="formdata"
        ref="ruleForm"
        label-position="top"
        :inline="true"
        :rules="formrule"
        :disabled="disabledType"
      >
        <div class="paymentReqAdddata">
          <div class="rule_title">
            <span class="title-l">
              <i class="icon_left"></i>{{ titleTip }}
              <span
                v-if="tabType == 2"
                style="margin: 0px 0px 0px 20px; color: #f1a357"
                >{{ formdata.status_name }}</span
              >
            </span>
          </div>
          <div class="paymentReqAdd_form">
            <el-row
              style="display: flex; flex-wrap: wrap"
              v-if="tabType == 0 || tabType == 1"
              class="receiptManageadd_form_creation"
            >
              <el-col :span="24">
                <el-form-item label="申请原因" prop="apply_reason">
                  <el-input
                    type="textarea"
                    autosize
                    placeholder="请输入申请原因"
                    v-model="formdata.apply_reason"
                    style="width: 585%"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="付款公司主体"
                  prop="company_invoice_body_id"
                >
                  <el-select
                    v-model="formdata.company_invoice_body_id"
                    filterable
                    placeholder="请选择付款公司主体"
                  >
                    <el-option
                      v-for="item in invoiceList"
                      :key="item.id"
                      :label="item.invoice_body_name"
                      :value="item.id + ''"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="tabType == 1 || tabType == 2">
                <el-form-item label="申请单号" prop="apply_no">
                  <span>{{ formdata.apply_no }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="成本类型" prop="cost_type">
                  <el-select
                    v-model="formdata.cost_type"
                    placeholder="请选择成本类型"
                  >
                    <el-option
                      v-for="item in company_body"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联对象类型" prop="cost_type">
                  <el-select
                    filterable
                    v-model="formdata.relation_type"
                    placeholder="关联对象类型"
                    @change="relation_typeObj"
                  >
                    <el-option
                      v-for="item in categoryList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="formdata.relation_type != 1">
                <el-form-item label="关联对象" prop="relation_id">
                  <el-select
                    filterable
                    v-model="formdata.relation_id"
                    placeholder="请选择关联对象
                                    "
                  >
                    <el-option
                      v-for="item in customerBoxDataList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id + ''"
                    >
                    </el-option>
                  </el-select>
                  <span style="margin: 0px 0px 0px 10px;color: blue; cursor: pointer" @click="customDiagosis()"  v-if="tabType == 1 || tabType == 2">诊断</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="付款方式" prop="payment_type">
                  <el-select
                    v-model="formdata.payment_type"
                    placeholder="请选择关联对象
                                    "
                  >
                    <el-option
                      v-for="item in payment_method"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value + ''"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="付款金额" prop="apply_money">
                  <el-input
                    v-model="formdata.apply_money"
                    placeholder="请输入"
                    disabled
                    type="number"
                    style="width: 109%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否冲销备用金">
                  <el-radio v-model="formdata.is_used_petty_cash" label="0"
                    >否</el-radio
                  >
                  <el-radio v-model="formdata.is_used_petty_cash" label="1"
                    >是</el-radio
                  >
                </el-form-item>
              </el-col>
              <!--当是否冲销备 是 -->
              <el-col :span="8" v-if="formdata.is_used_petty_cash == 1">
                <el-form-item label="备用金账号" prop="petty_cash_id">
                  <el-select
                    v-model="formdata.petty_cash_id"
                    placeholder="请输入备用金账号名称"
                    @change="SelectedData"
                  >
                    <el-option
                      v-for="item in optionsList"
                      :key="item.id"
                      :label="item.invoice_body_name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="formdata.is_used_petty_cash == 1">
                <el-form-item label="备用金余额">
                  <el-input
                    disabled
                    v-model="imprestFund"
                    placeholder="请输入"
                    style="width: 109%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="formdata.is_used_petty_cash == 1">
                <el-form-item label="冲抵备用金" prop="charge_off_money">
                  <el-input
                    v-model="formdata.charge_off_money"
                    type="number"
                    placeholder="请输入"
                    style="width: 109%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报销金额">
                  <el-input
                    v-model="reimbursement"
                    placeholder="请输入"
                    style="width: 109%"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="付款日期" prop="pay_time">
                  <el-date-picker
                    style="width: 93%"
                    v-model="formdata.pay_time"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="timestamp"
                    align="right"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="是否开具发票">
                  <el-radio v-model="formdata.is_invoice_issued" label="0"
                    >否</el-radio
                  >
                  <el-radio v-model="formdata.is_invoice_issued" label="1"
                    >是</el-radio
                  >
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="formdata.is_invoice_issued == 1">
                <el-form-item label="发票类型" prop="invoice_type">
                  <el-select
                    v-model="formdata.invoice_type"
                    placeholder="发票类型"
                  >
                    <el-option
                      v-for="item in invoice_option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="formdata.is_invoice_issued == 1">
                <el-form-item label="发票税率" prop="invoice_tax_rate">
                  <el-select
                    v-model="formdata.invoice_tax_rate"
                    placeholder="发票类型"
                  >
                    <el-option
                      v-for="item in invoice_tax_option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8" v-if="usernameflase == false">
                <el-form-item label="收款人" prop="payee">
                  <el-select
                    filterable
                    remote
                    reserve-keyword
                    :remote-method="searchCustomerList"
                    v-model="formdata.payee"
                    @change="selectedCustomer"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in clientList"
                      :key="item.id"
                      :label="item.invoice_body_name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="usernameflase == false">
                <el-form-item label="收款银行" prop="receive_bank">
                  <el-input
                    v-model="formdata.receive_bank"
                    placeholder="请输入"
                    style="width: 109%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="usernameflase == false">
                <el-form-item label="收款账号" prop="receive_account">
                  <el-input
                    v-model="formdata.receive_account"
                    style="width: 109%"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="附件上传">
                  <UploadLink :files.sync="formdata.appendix"></UploadLink>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-else class="receiptManageadd_form_details">
              <el-col :span="24">
                <el-form-item label="申请原因" prop="apply_reason">
                  <el-input
                    type="textarea"
                    autosize
                    placeholder="请输入申请原因"
                    v-model="formdata.apply_reason"
                    style="width: 585%"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item
                  label="付款公司主体"
                  prop="company_invoice_body_id"
                >
                  <span>{{ formdata.company_invoice_body_id_name }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                v-if="tabType == 1 || tabType == 2"
                class="row_height_of"
              >
                <el-form-item label="申请单号" prop="apply_no">
                  <span>{{ formdata.apply_no }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="成本类型" prop="cost_type">
                  <span>{{ formdata.cost_type_name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="关联对象类型" prop="cost_type">
                  <span>{{ formdata.relation_type_name }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                v-if="formdata.relation_type != 1"
                class="row_height_of"
              >
                <el-form-item label="关联对象" prop="relation_id">
                  <span>{{ formdata.relation_id_name }}</span>
                  <span style="margin: 0px 0px 0px 10px;color: blue; cursor: pointer" @click="customDiagosis()">诊断</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="付款方式" prop="payment_type">
                  <span>{{ formdata.payment_type_name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="付款金额" prop="apply_money">
                  <span>{{ formdata.apply_money }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="是否冲销备用金">
                  <span>{{ formdata.is_used_petty_cash_name }}</span>
                </el-form-item>
              </el-col>
              <!--当是否冲销备 是 -->
              <el-col
                :span="8"
                v-if="formdata.is_used_petty_cash == 1"
                class="row_height_of"
              >
                <el-form-item label="备用金账号" prop="petty_cash_id">
                  <span>{{ formdata.petty_cash_id_name }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                v-if="formdata.is_used_petty_cash == 1"
                class="row_height_of"
              >
                <el-form-item label="备用金余额">
                  <span>{{ imprestFund }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                v-if="formdata.is_used_petty_cash == 1"
                class="row_height_of"
              >
                <el-form-item label="冲抵备用金" prop="charge_off_money">
                  <span>{{ formdata.charge_off_money }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="报销金额">
                  <span>{{ reimbursement }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="付款日期" prop="pay_time">
                  <span v-time="formdata.pay_time"></span>
                </el-form-item>
              </el-col>

              <el-col :span="8" class="row_height_of">
                <el-form-item label="是否开具发票">
                  <span>{{ formdata.is_invoice_issued_name }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                v-if="formdata.is_invoice_issued == 1"
                class="row_height_of"
              >
                <el-form-item label="发票类型" prop="invoice_type">
                  <span>{{ formdata.invoice_type_name }}</span>
                </el-form-item>
              </el-col>
              <el-col
                :span="8"
                v-if="formdata.is_invoice_issued == 1"
                class="row_height_of"
              >
                <el-form-item label="发票税率" prop="invoice_tax_rate">
                  <span>{{ formdata.invoice_tax_rate_name }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8" class="row_height_of" v-if="usernameflase == false">
                <el-form-item label="收款人" prop="payee">
                  <span>{{ formdata.payee }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of" v-if="usernameflase == false">
                <el-form-item label="收款银行" prop="receive_bank">
                  <span>{{ formdata.receive_bank }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of" v-if="usernameflase == false">
                <el-form-item label="收款账号" prop="receive_account">
                  <span>{{ formdata.receive_account }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="申请人">
                  <span>{{ formdata.creator_id_name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="row_height_of">
                <el-form-item label="申请时间">
                  <span v-time="formdata.create_time"></span>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="附件上传">
                  <UploadLink :files.sync="formdata.appendix"></UploadLink>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div
          style="
            height: 50%;
            background: #ffffff;
            margin: 10px 10px 10px 10px;
            padding: 20px;
            border-radius: 10px;
          "
        >
          <el-row :gutter="24">
            <div style="margin: 0px 0px 10px 10px">
              <el-button plain type="primary" @click="reimbureadd()"
                >新增</el-button
              >

              <el-button plain type="primary" @click="reimburedelet()"
                >删除</el-button
              >
            </div>
          </el-row>
          <el-row :gutter="24">
            <el-table
              :data="formdata.expenditure_list"
              style="width: 100%; margin: 0px 0px 0px 10px"
              :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="fee_id" label="费项" width="180">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'expenditure_list.' + scope.$index + '.fee_id'"
                    :rules="formrule.fee_id"
                    style="padding: 15px 0px 0px 0px"
                  >
                    <el-select
                      v-model="scope.row.fee_id"
                      filterable
                      placeholder="请选择"
                      @change="handleFeeChange(scope.row)"
                    >
                      <el-option
                        v-for="item in travelExpenseList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id + ''"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="fee_detail" label="费项明细" width="180">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fee_detail"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="选择月" width="210">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'expenditure_list.' + scope.$index + '.date'"
                    :rules="formrule.date"
                    style="padding: 15px 0px 0px 0px"
                  >
                    <el-date-picker
                      v-model="scope.row.date"
                      style="width: 185px"
                      @change="handleFeeChange(scope.row)"
                      value-format="timestamp"
                      type="month"
                      placeholder="选择月"
                    >
                    </el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="money" label="金额" width="180">
                <template slot-scope="scope">
                  <!-- <el-input v-model="scope.row.money" type="number" key="001"></el-input> -->
                  <el-form-item
                    :prop="'expenditure_list.' + scope.$index + '.money'"
                    style="padding: 15px 0px 0px 0px"
                    :rules="formrule.money"
                  >
                    <el-input
                      v-model="scope.row.money"
                      type="number"
                      key="001"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="上传附件" min-width="300">
                <template slot-scope="scope">
                  <UploadLink
                    :files.sync="scope.row.enclosure_list"
                  ></UploadLink>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </div>
        <div
          style="
            height: 50%;
            width: 50%;
            background: #ffffff;
            margin: 10px 10px 10px 10px;
            padding: 20px;
            border-radius: 10px;
          "
        >
          <el-form-item label="分摊方式">
            <el-select v-model="formdata.share_type" placeholder="发票类型">
              <el-option
                v-for="item in share_option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-table
            :data="formdata.share"
            border
            style="width: 100%"
            v-if="formdata.share_type != ''"
          >
            <el-table-column type="index" width="40">
              <template slot="header" slot-scope="scope">
                <span
                  @click="addShiper(scope)"
                  style="font-size: 20px; text-align: center"
                  >+</span
                >
              </template>
              <template slot-scope="scope">
                <div class="remodername">
                  <div class="number">{{ scope.$index + 1 }}</div>
                  <div
                    class="remodercenter el-icon-minus"
                    @click="reduce(scope.$index)"
                  ></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="share_branch_id" label="分摊部门">
              <template slot="header">
                <span style="color: red">*分摊部门</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="'share.' + scope.$index + '.share_branch_id'"
                  :rules="formrule.share_branch_id"
                >
                  <el-select
                    v-model="scope.row.share_branch_id"
                    filterable
                    placeholder="请选择分摊部门"
                    style="margin-top: 18px"
                  >
                    <el-option
                      v-for="item in reqWebsiteData"
                      :key="item.id"
                      :label="item.branch_name"
                      :value="item.id + ''"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="share_content"
              label="按比例分摊(%)"
              v-if="formdata.share_type == 1"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.share_content"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="share_content"
              label="按金额分摊(元)"
              v-if="formdata.share_type == 0"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.share_content"
                  type="number"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <!-- Tabs != 0 && -->
      <div v-if=" Object.keys(AuditDetails).length != 0">
        <approval
          :AuditDetails="AuditDetails"
          style="width: 100%"
          :fatherMethod="fatherMethod"
          :key="Math.random()"
        ></approval>
      </div>
      <div class="footerType">
        <div>
          <el-col
            :span="24"
            style="text-align: center; margin: 5px 0px 5px 0px"
            v-if="Tabs == 3 || Tabs == 4"
          >
            <el-button @click="AuditCancellation()" type="primary" plain
              >关闭</el-button
            >
            <el-button
              @click="PassAuditadd(1)"
              type="primary"
              v-if="Tabs == 3 && AuditDetails.is_current_user_can_approve == 1"
              plain
              :disabled="false"
              >通过</el-button
            >
            <el-button
              @click="PassAuditadd(2)"
              type="primary"
              v-if="Tabs == 3 && AuditDetails.is_current_user_can_approve == 1"
              plain
              :disabled="false"
              >驳回</el-button
            >
            <el-button
            @click="PassAuditturn()"
            type="primary"
            v-if="Tabs == 3 && AuditDetails.is_current_user_can_approve == 1"
            plain
            :disabled="false"
            >转办</el-button
          >
            <el-button
              @click="revocation()"
              v-if="
                (localgetdata.user_id == formdata.creator_id ||
                  localgetdata.user_id == 1) &&
                (formdata.status == 1 || formdata.status == 2)
              "
              type="primary"
              plain
              >撤回</el-button
            >
            <el-button
              @click="derivedDataItem()"
              v-if="
                formdata.status == 1 ||
                formdata.status == 3 ||
                formdata.status == 2
              "
              type="primary"
              plain
              >导出</el-button
            >
            <el-dropdown style="margin: 0px 0px 0px 10px">
              <el-button type="primary" plain>
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" :append-to-body="false" v-if="Tabs != 0">
                <!-- <el-dropdown-item v-if="formdata.status==1 || formdata.status==3 || formdata.status==2 "
                                    style="width: 50px; text-align: center;">
                                    <span @click="derivedDataItem()">导出</span>
                                 
                                </el-dropdown-item> -->
                <el-dropdown-item
                  v-if="
                    formdata.status == 1 &&
                    localgetdata.user_id == formdata.creator_id
                  "
                  style="width: 70px; text-align: center"
                >
                  <div style="width: 70px;" @click="pressab()"> 催办</div>
                  <!-- <el-button type="primary"
                                        v-if=" formdata.status == 1 && localgetdata.user_id==  formdata.creator_id "
                                        plain @click="pressab()">催办</el-button> -->
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="
                    formdata.status == 1 ||
                    formdata.status == 2 ||
                    formdata.status == 3
                  "
                  style="width: 70px; text-align: center"
                >
                  <div style="width: 70px;" @click="AddComment()">评论</div>
                  <!-- <el-button @click="AddComment()"
                                        v-if="formdata.status == 1 || formdata.status == 2 || formdata.status == 3"
                                        type="primary" plain>评论</el-button> -->
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="formdata.status == 1"
                  style="width: 70px; text-align: center"
                >
                  <div style="width: 70px;" @click="reapplyPay()">再次申请</div>
                  <!-- <el-button @click="reapplyPay()" v-if="formdata.status == 1" type="primary"
                                        plain>再次申请</el-button> -->
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col
            :span="24"
            style="text-align: center; margin: 5px 0px 5px 0px"
            v-else
          >
            <el-button @click="cancellation()" type="primary" plain
              >取消</el-button
            >
            <el-button
              @click="preserve('ruleForm', 0)"
              v-if="tabType == 0 && Tabs == 0"
              type="primary"
              plain
              >保存</el-button
            >
            <el-button
              @click="redact('ruleForm', 0)"
              v-if="tabType == 1 && Tabs == 0"
              type="primary"
              plain
              >保存</el-button
            >
            <el-button
              @click="preserve('ruleForm', 1)"
              v-if="Tabs == 0"
              type="primary"
              plain
              >发起审批</el-button
            >
            <el-button
              @click="PassAuditadd(1)"
              type="primary"
              v-if="AuditDetails.is_current_user_can_approve == 1"
              plain
              :disabled="false"
              >通过</el-button
            >
            <el-button
              @click="PassAuditadd(2)"
              type="primary"
              v-if="AuditDetails.is_current_user_can_approve == 1"
              plain
              :disabled="false"
              >驳回</el-button
            >
            <el-button
            @click="PassAuditturn()"
            type="primary"
            v-if="AuditDetails.is_current_user_can_approve == 1"
            plain
            :disabled="false"
            >转办</el-button
          >
            <el-button
              @click="revocation()"
              v-if="
                (localgetdata.user_id == formdata.creator_id ||
                  localgetdata.user_id == 1) &&
                (formdata.status == 1 || formdata.status == 2)
              "
              type="primary"
              plain
              >撤回</el-button
            >
            <el-button
              @click="derivedDataItem()"
              v-if="
                formdata.status == 1 ||
                formdata.status == 3 ||
                formdata.status == 2
              "
              type="primary"
              plain
              >导出</el-button
            >
            <el-dropdown style="margin: 0px 0px 0px 10px" v-if="Tabs != 0">
              <el-button type="primary" plain>
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown" :append-to-body="false">
                <!-- <el-dropdown-item style="width: 50px;text-align: center;"
                                    v-if="formdata.status==1 || formdata.status==3 || formdata.status==2">
                                    <span @click="derivedDataItem()">导出</span>
                                
                                </el-dropdown-item> -->
                <el-dropdown-item
                  style="width: 70px; text-align: center"
                  v-if="
                    formdata.status == 1 ||
                    formdata.status == 2 ||
                    formdata.status == 3
                  "
                >
                  <div style="width: 70px;" @click="AddComment()">评论</div>
                  <!-- <el-button @click="AddComment()"
                                        v-if="formdata.status == 1 || formdata.status == 2 || formdata.status == 3"
                                        type="primary" plain>评论</el-button> -->
                </el-dropdown-item>
                <el-dropdown-item
                  style="width: 70px; text-align: center"
                  v-if="
                    formdata.status == 1 &&
                    localgetdata.user_id == formdata.creator_id
                  "
                >
                  <div style="width: 70px;" @click="pressab()">催办</div>
                  <!-- <el-button type="primary"
                                        v-if=" formdata.status == 1 && localgetdata.user_id==  formdata.creator_id "
                                        plain @click="pressab()">催办
                                    </el-button> -->
                </el-dropdown-item>
                <el-dropdown-item
                  style="width: 70px; text-align: center"
                  v-if="formdata.status == 1"
                >
                  <div style="width: 70px;" @click="reapplyPay()">再次申请</div>
                  <!-- <el-button @click="reapplyPay()" v-if="formdata.status == 1" type="primary"
                                        plain>再次申请</el-button> -->
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </div>
      </div>

      <div class="commentdialog">
        <el-dialog
          title="添加评论"
          :visible.sync="commdialogVisible"
          width="30%"
        >
          <quillLink
            :AuditDetails="AuditDetails"
            ref="quilldata"
            @showCityName="updateCity"
          ></quillLink>
          <div style="margin: 10px 0px 0px 0px; display: flex">
            <UploadLink :files.sync="recordex.annex"></UploadLink>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="commdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="preserveComment()"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
      <div class="auditOpinion">
        <el-dialog
          title="审核意见"
          :visible.sync="auditOpinionVisble"
          width="30%"
        >
          <div style="margin-bottom: 10px">
            <el-input
              type="textarea"
              :rows="4"
              v-model="opinionFile.opinion"
              placeholder="请输入审核意见内容"
            ></el-input>
          </div>
          <div class="uploadList">
            <el-upload
              action
              :auto-upload="false"
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-change="handleChangeObj"
              :file-list="fileListList"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div></div>
          <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button type="primary" @click="PassAuditcancel()"
              >取消</el-button
            >
            <el-button
              @click="PassAudit()"
              v-if="PassAuditsucced == 1"
              type="primary"
              plain
              >通过</el-button
            >
            <el-button
              @click="ReviewAudit()"
              type="primary"
              v-if="PassAuditsucced == 2"
              plain
              >驳回</el-button
            >
          </span>
        </el-dialog>
      </div>
      <!-- 催办  -->
      <div class="presstodo">
        <el-dialog title="选择催办人" :visible.sync="outerVisible">
          <div>
            <el-transfer
              v-model="outerVisibleList"
              :props="{
                key: 'id',
                label: 'name',
              }"
              :data="AuditDetails.urge_relation_user"
              :titles="['全选', '已选']"
            >
            </el-transfer>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="outerVisibleconfirm()"
              >确定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
        <!-- 转办 -->
        <div v-if="dialogturn">
          <TurnTohold :audit_id_list="audit_id_list" @listenToChildEvent='showMsgfromChild'  :AuditDetails="AuditDetails"></TurnTohold>
        </div>
    <!-- 客户诊断 -->
    <div v-if="customerData.diagnosis">
       <customerDiagnosis :customerData="customerData" :fatherMethodDetail="fatherMethodHandle"  ></customerDiagnosis>
    </div>
  </div>
</template>
<script>
import quillLink from "@/components/quillLink/quillLink.vue";
import TurnTohold from "@/components/TurnTohold/TurnTohold.vue"
import { downloadFile } from "@/page/material/common/common";
// 付款主体
import { reqWebsiteList, regional_monthly_payment_check } from "@/api/customer";
import { organizationBox } from "@/api/organization";
import { uploading } from "@/page/material/common/common";
import { timestamp10 } from "@/utils/mUtils"; // 时间转化
import { customerBox } from "@/api/Largewidthmeterlist";
import { invoice_book_box, finance_invoice_book_options } from "@/api/finance";
import {
  paymentApplyCreate,
  paymentApplyDetail,
  paymentApplyUpdatel,
  paymentApplyCancelReview,
  examine_record_send_message,
} from "@/api/paymentrequest";
import {
  record_process_detail,
  examine_record_update,
  examine_comment_create,
  examine_comment_delete,
  payment_apply_export,
} from "@/api/paymentrequest";
import approval from "@/components/approval/approval.vue";
import { invoiceBookoptions } from "@/api/information";
import UploadLink from "@/components/uploadFile/uploadLink.vue";
import customerDiagnosis from "@/components/customerDiagnosis/customerDiagnosis.vue"
export default {
  name: "paymentReqAdd",
  components: { approval, UploadLink, quillLink ,TurnTohold,customerDiagnosis},
  data() {
    return {
      tabType: "", //当为0的时候是创建1的时候是编辑
      Tabs: "", //当前的切换页
      titleTip: "付款申请",
      titleTipTwo: "费用分摊",
      labelPosition: "right",
      reqWebsiteData: [], //付款主体
      customerBoxData: [], //所属客户
      optionsList: [], //备用金账户
      imprestFund: "", //备用金余额
      reimbursement: 0, //实际报销金额.
      formdata: {
        id: "",
        apply_reason: "", //申请原因
        company_invoice_body_id: "", //付款主体ID
        cost_type: "", //成本类型
        payment_type: "", //付款类型
        apply_money: "", //付款金额
        is_used_petty_cash: "0", //是否使用备用金 0 否 1 是
        charge_off_money: "", //冲销备用金金额
        petty_cash_id: "", //备用金账号id
        pay_time: "", //付款日期
        relation_id: "", //关联客户ID
        is_invoice_issued: "0", //是否开具发票
        invoice_type: "", //发票类型 1 普通发票 2 专用发票
        invoice_tax_rate: "", //发票税率(为装用发票出现 1:3% 2:6% 3:9% 4:13% 5:其它)
        share_type: "0", //分摊方式 0 按金额分摊 1 按比例分摊
        payee: "", // 收款人(收款单位)
        receive_bank: "", //收款银行
        receive_bank_number: "", //收款银行行号
        receive_account: "", //收款账号
        is_initiate_audi: "", //是否发审核
        share: [
          {
            share_branch_id: "",
            share_branch_id_name: "",
            share_content: "",
          },
        ],
        // 上传附件
        appendix: [],
        relation_type: "", //关联对象
        expenditure_list: [
          {
            id: "1",
            fee_id: "", // 费项id
            fee_detail: "", // 费项明细
            date: "", // 日期
            money: "", // 金额
            // remark: "",//备注
            enclosure_list: [], // 附件
          },
        ],
      },
      formrule: {
        apply_reason: [
          { required: true, message: "请输入申请原因", trigger: "blur" },
        ],
        company_invoice_body_id: [
          { required: true, message: "请输入付款主体", trigger: "blur" },
        ],
        cost_type: [
          { required: true, message: "请输入成本类型", trigger: "blur" },
        ],
        relation_id: [
          { required: true, message: "请输入关联客户", trigger: "blur" },
        ],
        apply_money: [
          { required: true, message: "请输入付款金额", trigger: "blur" },
        ],
        charge_off_money: [
          { required: true, message: "请输入冲抵备用金", trigger: "blur" },
        ],
        pay_time: [
          { required: true, message: "请输入付款日期", trigger: "blur" },
        ],

        petty_cash_id: [
          { required: true, message: "请输入备用金账号", trigger: "blur" },
        ],

        pay_time: [
          { required: true, message: "请输入申请原因", trigger: "blur" },
        ],
        invoice_type: [
          { required: true, message: "请输入发票类型", trigger: "blur" },
        ],
        invoice_tax_rate: [
          { required: true, message: "请输入发票税率", trigger: "blur" },
        ],
        share_branch_id: [
          { required: true, message: "请输入分摊部门", trigger: "blur" },
        ],
        payee: [{ required: true, message: "请输入收款人", trigger: "blur" }],
        receive_bank: [
          { required: true, message: "请输入银行", trigger: "blur" },
        ],
        receive_bank_number: [
          { required: true, message: "收款银行行号", trigger: "blur" },
        ],
        receive_account: [
          { required: true, message: "收款银行行号", trigger: "blur" },
        ],
        payment_type: [
          { required: true, message: "付款方式", trigger: "blur" },
        ],
        payment_type: [
          { required: true, message: "付款方式", trigger: "blur" },
        ],
        fee_id: [{ required: true, message: "费项", trigger: "blur" }],
        date: [{ required: true, message: "日期", trigger: "blur" }],
        money: [{ required: true, message: "金额", trigger: "blur" }],
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
        },
      ],
      company_body: [
        {
          value: "1",
          label: "运营费用",
        },
        {
          value: "2",
          label: "人事费用",
        },
        {
          value: "3",
          label: "销售费用",
        },
        {
          value: "4",
          label: "办公费用",
        },
        {
          value: "5",
          label: "其它费用",
        },
      ],
      invoice_option: [
        {
          value: "1",
          label: "普通发票",
        },
        {
          value: "2",
          label: "专用发票",
        },
      ],
      invoice_tax_option: [
        {
          value: "6",
          label: "1%",
        },
        {
          value: "1",
          label: "3%",
        },
        {
          value: "2",
          label: "6%",
        },
        {
          value: "3",
          label: "9%",
        },
        {
          value: "4",
          label: "13%",
        },
        {
          value: "5",
          label: "其他",
        },
      ],
      share_option: [
        {
          value: "0",
          label: "按金额分摊",
        },
        {
          value: "1",
          label: "按比例分摊",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      AuditDetails: {},
      commdialogVisible: false,
      recordex: {
        examine_record_id: "", // 审核记录id
        content: "", // 内容
        annex: [], //评论
      },
      audit_id_list: "",
      auditOpinionVisble: false,
      dialogVisibleout: false,
      dialogImageUrl: "",
      fileListList: [], //上传的文件
      opinionFile: {
        opinion: "", //审核意见
        opinion_annex: [],
      },
      invoiceList: [],
      PassAuditsucced: "",
      disabledType: false,
      categoryList: [
       
      ],
      customerBoxDataList: [],
      payment_method: [
        {
          value: "0",
          text: "现金",
        },
        {
          value: "1",
          text: "银行卡",
        },
        {
          value: "2",
          text: "支票",
        },
        {
          value: "3",
          text: "电汇",
        },
        {
          value: "4",
          text: "汇票",
        },
        {
          value: "5",
          text: "贷记",
        },
        {
          value: "6",
          text: "其他",
        },
      ],
      localgetdata: {},
      contentList: {},
      outerVisible: false,
      outerVisibleList: [],
      travelExpenseList: [], //费项
      checkedID: [],
      collectMoeny: "",
      clientList: [],
      usernameflase:false,
      dialogturn:false,
      customerData:{
        customer_id:"",
        search_time:"",
        diagnosis:false
      }
    };
  },
  watch: {
    "formdata.apply_money": {
      handler() {
        if (this.formdata.is_used_petty_cash * 1 == 0) {
          this.reimbursement = this.formdata.apply_money;
        }
        if (this.formdata.share_type == 0 && this.tabType == 0) {
          this.formdata.share[0].share_content = this.formdata.apply_money;
        }
      },
      deep: true,
    },
    "formdata.cost_type": {
      handler() {
        if (this.formdata.cost_type == 1) {
          this.travelExpenseList = [
            {
              id: "1",
              name: "车辆租赁费",
            },
            {
              id: "2",
              name: "耗材租赁费",
            },
            {
              id: "3",
              name: "采购运营物资",
            },
            {
              id: "4",
              name: "加油费",
            },
            {
              id: "5",
              name: "快递费",
            },
            {
              id: "6",
              name: "其它",
            },
          ];
          this.categoryList = [
              {
              id: "0",
              name: "客户",
            }
          ]
        } else if (this.formdata.cost_type == 2) {
          this.travelExpenseList = [
            {
              id: "1",
              name: "团建费",
            },
            {
              id: "2",
              name: "劳保费",
            },
            {
              id: "3",
              name: "其它",
            },
          ];
          this.categoryList  = [
              {
                id: "0",
                name: "客户",
              },

              {
                id: "1",
                name: "渡石",
              },
            ]
        } else if (this.formdata.cost_type == 3) {
          this.travelExpenseList = [
            {
              id: "1",
              name: "差旅费",
            },
            {
              id: "2",
              name: "住宿费",
            },
            {
              id: "3",
              name: "交通费",
            },
            {
              id: "4",
              name: "招待费",
            },
            {
              id: "5",
              name: "通讯费",
            },
            {
              id: "6",
              name: "办公费",
            },
            {
              id: "7",
              name: "其它",
            },
          ];
          this.categoryList = [
              {
              id: "0",
              name: "客户",
            }
          ]
        } else if (this.formdata.cost_type == 4) {
          this.travelExpenseList = [
            {
              id: "1",
              name: "房租",
            },
            {
              id: "2",
              name: "物业",
            },
            {
              id: "3",
              name: "网费",
            },
            {
              id: "4",
              name: "水费",
            },
            {
              id: "5",
              name: "电费",
            },
            {
              id: "6",
              name: "其它",
            },
            {
              id: "7",
              name: "差旅费",
            },
            {
              id: "8",
              name: "住宿费",
            },
            {
              id: "9",
              name: "交通费",
            },
            {
              id: "10",
              name: "招待费",
            },
            {
              id: "11",
              name: "通讯费",
            },
            {
              id: "12",
              name: "办公费",
            },
          ];
          this.categoryList  = [
              {
                id: "0",
                name: "客户",
              },

              {
                id: "1",
                name: "渡石",
              },
            ]
        } else if (this.formdata.cost_type == 5) {
          this.travelExpenseList = [
            {
              id: "1",
              name: "其它",
            },
          ];
          this.categoryList  = [
              {
                id: "0",
                name: "客户",
              },

              {
                id: "1",
                name: "渡石",
              },
            ]
        }
        if (this.Tabs == 0) {
          if (this.formdata.expenditure_list.length > 0) {
            for (var i = 0; i < this.formdata.expenditure_list.length; i++) {
              this.handleFeeChange(this.formdata.expenditure_list[i]);
            }
          }
        }
      },
      deep: true,
    },
    "formdata.charge_off_money": {
      handler() {
        this.reimbursement = this.formdata.apply_money;
        if (this.formdata.is_used_petty_cash * 1 != 0) {
          this.reimbursement =
            this.formdata.apply_money - this.formdata.charge_off_money;
        }
        console.log(this.reimbursement,"备用金出发")
      },
      deep: true,
    },
    "formdata.is_used_petty_cash": {
      handler() {
        if (this.formdata.is_used_petty_cash == 0) {
          this.imprestFund = "";
          this.formdata.petty_cash_id = "";
          this.formdata.charge_off_money = "";
          this.reimbursement = this.formdata.apply_money;
        }
      },
      deep: true,
    },
    imprestFund: {
      handler() {},
      deep: true,
    },
    "formdata.share": {
      handler() {},
      deep: true,
    },
    "formdata.share_type": {
      deep: true,
      handler() {},
    },
    "formdata.expenditure_list": {
      deep: true,
      handler() {
        var loaMoery = 0;
        if (this.formdata.expenditure_list != null) {
          this.formdata.expenditure_list.forEach((val, index) => {
            loaMoery += val.money * 1;
          });
          this.collectMoeny = loaMoery.toFixed(2);
          this.formdata.apply_money = this.collectMoeny;
          this.reimbursement = (this.formdata.apply_money - this.formdata.charge_off_money).toFixed(2)
        }
      },
      
    },
    reimbursement: {
      deep: true,
      handler() {
        if(this.reimbursement == 0 && this.formdata.is_used_petty_cash == 1 ) {
          this.usernameflase = true
          this.formdata.receive_account = ""
          this.formdata.receive_bank = ""
          this.formdata.payee = ""
        }else {
          this.usernameflase = false
        }
      },
      
    },
    // "formdata.cost_type":{
    //   deep:true,
    //   // 当选择 运营费用和销售费用 不能关联渡石
    //   handler() {
    //     if(this.formdata.cost_type == 1 || this.formdata.cost_type == 3 ) {
    //       this.categoryList = [
    //           {
    //           id: "0",
    //           name: "客户",
    //         }
    //       ]
    //     }else {
    //       this.categoryList  = [
    //           {
    //             id: "0",
    //             name: "客户",
    //           },

    //           {
    //             id: "1",
    //             name: "渡石",
    //           },
    //         ]
    //     }
    //   }
    // }
  },
  beforeMount(){
    this.invoiceBox();
  },
  async mounted() {
    this.localgetdata = JSON.parse(localStorage.getItem("user"));
    this.tabType = this.$route.query.Type;
    this.Tabs = this.$route.query.TageType;
  
    await this.customerBoxFn();
    // type 0  是创建 1 是编辑 2 是查看
    if (this.tabType == 1) {
      this.applyDetail();
    } else if (this.tabType == 2) {
      this.applyDetail();
      this.disabledType = true;
    } else if (this.tabType == 0) {
      this.formdata.share[0].share_branch_id = this.localgetdata.branch_id + "";
    }
    if (this.Tabs == 3 || this.Tabs == 4 || this.Tabs == 7) {
      this.audit_id_list = this.$route.query.audit_id;
      this.record_process_detailObj();
    } else {
    }
    this.reqWebsiteListFn();
    this.Subjectpayment();
    if(this.reimbursement == 0 && this.formdata.is_used_petty_cash == 1 ) {
        this.usernameflase = true
        this.formdata.receive_account = ""
        this.formdata.receive_bank = ""
        this.formdata.payee = ""
      }else {
        this.usernameflase = false
      }
  },
  methods: {
    // 付款主体
    Subjectpayment() {
      var param = {
        body_belong: "0", // 发票主体所属：0公司，1客户，2承运商
        belong_to_id: 0, // 发票主体所属id
        invoice_body_name: "",
        type: "0", // 类型 0发票主题 1备用金
      };
      invoiceBookoptions(param).then((res) => {
        if (res.code == "10000") {
          this.invoiceList = res.data;
        }
      });
      
    },

    // 详情数据
    async applyDetail() {
      var param = {
        id: this.$route.query.id,
      };
      var result = await paymentApplyDetail(param);
      if (result.data.expenditure_list != null) {
        result.data.expenditure_list.forEach((item) => {
          if (item.date != 0) {
            item.date = item.date * 1000;
          } else {
            item.date = "";
          }
          if (item.fee_id == 0) {
            item.fee_id = "";
          }
        });
      } else {
      }
      this.formdata.expenditure_list = result.data.expenditure_list;
      if (result.data.is_used_petty_cash == 1) {
        this.SelectedData(result.data.petty_cash_id);
      }
      this.formdata = { ...result.data };
      this.formdata.pay_time =
        result.data.pay_time == 0 ? "" : result.data.pay_time * 1000;
      this.relation_typeObj();
      console.log(this.formdata.status,"this.formdatathis.formdata")
      if (this.formdata.status != 0) {
        if (result.data.examine_id != 0) {
          this.audit_id_list = result.data.examine_id;
          this.record_process_detailObj();
        }
      }
    },
    // 上传文件
    handleChange(file, fileList, type) {
      this.fileList = fileList;
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((res) => {
        this.formdata.appendix.push({
          uid: file.uid,
          url: res.res.requestUrls[0],
          name: res.name,
        });
      });
    },
    removeChange(file) {
      const index = this.formdata.appendix.findIndex(
        (item) => item.uid === file.uid
      );
      index > -1 && this.formdata.appendix.splice(index, 1);
    },
    // 非备用金账号
    async invoiceBox() {
      var param = {
        invoice_body_name: "",
      };
      var res = await invoice_book_box(param);
      if (res.code == 10000) {
        this.optionsList = res.data;
      }
    },
    reqWebsiteListFn() {
      let data = {
        pid: 1,
      };
      organizationBox(data).then((res) => {
        if (res.code === 10000) {
          this.reqWebsiteData = res.data;
        }
      });
    },

    async customerBoxFn() {
      let data = {
        name: "", //名称
        is_send: "1", //是否为客户 0不  1是客户
        is_receive: "", //是否收货单位  0不是  1是
      };
      var res = await customerBox(data).then((res) => {
        if (res.code === 10000) {
          this.customerBoxData = res.data;
        }
      });
    },
    SelectedData(val) {
      if (this.optionsList.find((res) => res.id == val) != undefined) {
        var choose = this.optionsList.find((res) => res.id == val);
        this.imprestFund = choose.balance;
      }
    },
    addShiper() {
      this.formdata.share.push({
        share_branch_id: "",
        share_branch_id_name: "",
        share_content: "",
      });
    },
    reduce(index) {
      if (this.formdata.share.length > 1) {
        this.formdata.share.splice(index, 1);
      } else {
        this.$message({
          message: "这是最后一条数据",
          type: "warning",
        });
      }
    },
    open2(value, type) {
      this.$message({
        message: value,
        type: type,
      });
    },
    preserve(formName, type) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formdata.share_type == 0) {
            let total = 0;
            this.formdata.expenditure_list.forEach((item) => {
              item.date = timestamp10(item.date) + "";
            });
            for (let i = 0; i < this.formdata.share.length; i++) {
              total += Number(this.formdata.share[i]["share_content"]);
            }
            if (
              total * 1 == this.formdata.apply_money * 1 &&
              this.formdata.charge_off_money * 1 <=
                this.formdata.apply_money * 1
            ) {
              var param = {
                ...this.formdata,
                pay_time: timestamp10(this.formdata.pay_time),
                expenditure_list: this.formdata.expenditure_list,
                is_initiate_audi: type + "",
              };
              paymentApplyCreate(param).then((res) => {
                if (type == 1) {
                  this.open2("发起审批成功", "success");
                  this.cancellation();
                } else if (type == 0) {
                  this.open2("付款申请创建成功", "success");
                  this.cancellation();
                }
              });
            } else {
              if (total * 1 != this.formdata.apply_money * 1) {
                this.open2("分摊金额等于付款金额", "warning");
              } else {
                this.open2("使用的冲抵备用金不能超过付款金额", "warning");
              }
            }
          } else if (this.formdata.share_type * 1 == 1) {
            this.formdata.expenditure_list.forEach((item) => {
              item.date = timestamp10(item.date) + "";
            });
            let total = 0;
            for (let i = 0; i < this.formdata.share.length; i++) {
              total += Number(this.formdata.share[i]["share_content"]);
            }
            if (
              total == "100" &&
              this.formdata.charge_off_money * 1 <=
                this.formdata.apply_money * 1
            ) {
              var param = {
                ...this.formdata,
                pay_time: timestamp10(this.formdata.pay_time),
                expenditure_list: this.formdata.expenditure_list,
                is_initiate_audi: type + "",
              };
              paymentApplyCreate(param).then((res) => {
                if (type == 1) {
                  this.open2("发起审批成功", "success");
                  this.cancellation();
                } else if (type == 0) {
                  this.open2("付款申请创建成功", "success");
                  this.cancellation();
                }
              });
            } else {
              if (total != "100") {
                this.open2("分摊比例为100%", "warning");
              } else {
                this.open2("使用的冲抵备用金不能超过付款金额", "warning");
              }
            }
          }
        } else {
          return false;
        }
      });
    },
    cancellation() {
      if (this.Tabs == 0) {
        this.$router.push({
          name: "paymentReq",
          query: { Typedata: this.Tabs },
        });
        Object.assign(this.$data.formdata, this.$options.data().formdata);
      } else if (this.Tabs == 1) {
        this.$router.push({
          name: "paymentReq",
          query: { Typedata: this.Tabs },
        });
        Object.assign(this.$data.formdata, this.$options.data().formdata);
      } else if (this.Tabs == 2) {
        this.$router.push({
          name: "paymentReq",
          query: { Typedata: this.Tabs },
        });
        Object.assign(this.$data.formdata, this.$options.data().formdata);
      } else if (this.Tabs == 5) {
        this.$router.push({ name: "paymentManage" });
      } else {
        window.history.back();
      }
    },
    redact(ruleForm, val) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          if (this.formdata.share_type == 0) {
            let total = 0;
            for (let i = 0; i < this.formdata.share.length; i++) {
              total += Number(this.formdata.share[i]["share_content"]);
            }
            this.formdata.expenditure_list.forEach((item) => {
              item.date = timestamp10(item.date) + "";
            });
            if (
              total * 1 == this.formdata.apply_money * 1 &&
              this.formdata.charge_off_money * 1 <=
                this.formdata.apply_money * 1
            ) {
              var param = {
                ...this.formdata,
                is_initiate_audi: val + "", //1是审核0不是审核
                pay_time: timestamp10(this.formdata.pay_time),
                expenditure_list: this.formdata.expenditure_list,
              };
              paymentApplyUpdatel(param).then((res) => {
                if (res.code == 10000) {
                  this.open2("修改付款申请成功", "success");
                  this.cancellation();
                } else {
                  this.open2("修改付款申请失败", "warning");
                }
              });
            } else {
              if (total * 1 != this.formdata.apply_money * 1) {
                this.open2("分摊金额等于付款金额", "warning");
              } else {
                this.open2("使用的冲抵备用金不能超过付款金额", "warning");
              }
            }
          } else if (this.formdata.share_type * 1 == 1) {
            let total = 0;
            for (let i = 0; i < this.formdata.share.length; i++) {
              total += Number(this.formdata.share[i]["share_content"]);
            }
            this.formdata.expenditure_list.forEach((item) => {
              item.date = timestamp10(item.date) + "";
            });
            if (total == "100") {
              var param = {
                ...this.formdata,
                is_initiate_audi: val + "", //1是审核0不是审核
                pay_time: timestamp10(this.formdata.pay_time),
                expenditure_list: this.formdata.expenditure_list,
              };
              paymentApplyUpdatel(param).then((res) => {
                if (res.code == 10000) {
                  this.open2("修改付款申请成功", "success");
                  this.cancellation();
                } else {
                  this.open2("修改付款申请失败", "warning");
                }
              });
            } else {
              if (total != "100") {
                this.open2("分摊比例为100%", "warning");
              } else {
                this.open2("使用的冲抵备用金不能超过付款金额", "warning");
              }
            }
          }
        } else {
        }
      });
    },
    // 审核的取消按钮
    AuditCancellation() {
      this.$router.push({ name: "auditrecordsList" });
    },
    // 审核通过
    PassAudit() {
      var param = {
        id: this.audit_id_list + "", // 审核记录id
        status: "1", // 是否通过1通过 2打回
        ...this.opinionFile,
      };
      examine_record_update(param).then((res) => {
        if (res.code == "10000") {
          this.open2("审核通过成功", "success");
          this.record_process_detailObj();
          this.auditOpinionVisble = false;
          Object.assign(
            this.$data.opinionFile,
            this.$options.data().opinionFile
          );
          this.$router.go(-1);
        }
      });
    },
    // 审核驳回
    ReviewAudit() {
      var param = {
        id: this.audit_id_list + "", // 审核记录id
        status: "2", // 是否通过1通过 2打回
        ...this.opinionFile,
      };
      examine_record_update(param).then((res) => {
        if (res.code == "10000") {
          this.open2("审核驳回成功", "success");
          this.record_process_detailObj();
          this.auditOpinionVisble = false;
          Object.assign(
            this.$data.opinionFile,
            this.$options.data().opinionFile
          );
          this.$router.go(-1);
        }
      });
    },
    // 审核流程接口
    record_process_detailObj() {
      var param = {
        id: this.audit_id_list,
      };
      record_process_detail(param).then((res) => {
        this.AuditDetails = res.data;
        if (this.formdata.expenditure_list.length > 0) {
          for (var i = 0; i < this.formdata.expenditure_list.length; i++) {
            this.handleFeeChangeType(this.formdata.expenditure_list[i]);
          }
        }
      });
    },
    //   添加评论
    AddComment() {
      this.commdialogVisible = true;
    },
    updateCity(value) {
      this.contentList = value;
    },
    // 保存评论
    preserveComment() {
      this.$refs.quilldata.preserveComment();
      var param = {
        ...this.recordex,
        examine_record_id: this.audit_id_list + "",
        content: this.contentList.content, // 评论内容，  催办不用填
      };
      examine_comment_create(param).then((res) => {
        if (res.code == "10000") {
          this.open2("添加评论成功", "success");
          this.record_process_detailObj();
          this.commdialogVisible = false;
          Object.assign(this.$data.recordex, this.$options.data().recordex);
          this.$refs.quilldata.preserveCommentclear();
        }
      });
      var param = {
        examine_id: this.audit_id_list + "",
        receiver_ids: this.contentList.receiver_ids, // 数组int类型的用户id
        content: this.contentList.content, // 评论内容，  催办不用填
        type: "0", // 0评论 1催办
      };
      examine_record_send_message(param).then((res) => {
        this.record_process_detailObj();
        this.commdialogVisible = false;
      });
    },

    // 审核通过
    PassAuditadd(value) {
      this.auditOpinionVisble = true;
      this.PassAuditsucced = value;
    },
    PassAuditcancel() {
      this.auditOpinionVisble = false;
      Object.assign(this.$data.opinionFile, this.$options.data().opinionFile);
    },
    beforeRemove(file, fileList) {
      return this.$confirm("是否删除该图片");
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleout = true;
    },
    handleRemove(file, fileList) {
      const index = this.opinionFile.opinionFile.findIndex(
        (item) => item.uid === file.uid
      );
      index > -1 && this.opinionFile.opinionFile.splice(index, 1);
    },
    handleChangeObj(file, fileList, type) {
      this.fileListList = fileList;
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((res) => {
        this.opinionFile.opinion_annex.push({
          name: file.uid + "",
          url: res.res.requestUrls[0],
        });
      });
    },
    fatherMethod() {
      this.record_process_detailObj();
    },
    relation_typeObj() {
      if (this.formdata.relation_type == 0) {
        this.customerBoxFn();
        this.customerBoxDataList = this.customerBoxData;
      } else if (this.formdata.relation_type == 1) {
        this.customerBoxDataList = [
          {
            id: 1,
            name: "北京渡石供应链科技有限公司",
          },
        ];
        this.formdata.relation_id = 1 + "";
      }
    },
    derivedDataItem() {
      var ids = this.$route.query.id;
      var param = {
        id: ids,
      };
      payment_apply_export(param).then((res) => {
        if (res.code == 10000) {
          downloadFile(res.data.loaded_url);
          this.$message({
            type: "success",
            message: "导出成功",
          });
        }
      });
    },
    revocation() {
      var param = {
        id: this.formdata.id,
      };
      paymentApplyCancelReview(param).then((res) => {
        this.cancellation();
      });
    },
    //
    pressab() {
      this.outerVisible = true;
    },
    outerVisibleconfirm() {
      var param = {
        examine_id: this.audit_id_list + "",
        receiver_ids: this.outerVisibleList.map(Number), // 数组int类型的用户id
        content: "", // 评论内容，  催办不用填
        type: "1", // 0评论 1催办
      };
      examine_record_send_message(param).then((res) => {
        this.record_process_detailObj();
        this.outerVisible = false;
      });
    },
    reimbureadd() {
      var id_length = this.formdata.expenditure_list.length + 1;
      this.formdata.expenditure_list.push({
        id: id_length,
        fee_id: "", // 费项id
        fee_detail: "", // 费项明细
        date: "", // 日期
        money: "", // 金额
        // remark: "",//备注
        enclosure_list: [], // 附件
      });
    },
    reimburedelet() {
      // this.formdata.expenditure_list.forEach((v, i) => {
      //   this.checkedID.forEach((val, index) => {
      //     if (val == v.id) {
      //       this.formdata.expenditure_list.splice(i, 1);
      //     }
      //   });
      // });
      this.formdata.expenditure_list = this.formdata.expenditure_list.filter(item => !this.checkedID.includes(item.index))
    },
    tableRowClassName(row, index) {
        // 给每条数据添加一个索引
        row.row.index = row.rowIndex
      },
    handleSelectionChange(val) {
      this.checkedID = val.map(item => item.index);
    },
    handleFeeChange(value) {
      if (value.date != "" && value.fee_id != "") {
        var param = {
          date: timestamp10(value.date), // 时间  10位时间戳
          branch_id: this.formdata.share[0].share_branch_id, // 区域id
          check_fee_type: this.formdata.cost_type, // 类型
          check_fee_id: value.fee_id, // 该类型的id
        };
        var fress_name = this.travelExpenseList.find(
          (item) => item.id == value.fee_id
        );

        this.regional_monthly_Obj(param, fress_name);
      }
    },
    handleFeeChangeType(value) {
      if (
        value.date != "" &&
        value.fee_id != "" &&
        this.AuditDetails.is_current_user_can_approve == 1
      ) {
        var param = {
          date: timestamp10(value.date), // 时间  10位时间戳
          branch_id: this.formdata.share[0].share_branch_id, // 区域id
          check_fee_type: this.formdata.cost_type, // 类型
          check_fee_id: value.fee_id, // 该类型的id
          apply_id: this.formdata.id, // 申请id      给审核人提示时需要填
          scene_type: "4", // 报销申请2   其它付款申请为4    给审核人提示时需要填
        };
        var fress_name = this.travelExpenseList.find(
          (item) => item.id == value.fee_id
        );
        this.regional_monthly_Obj_Data(param, fress_name);
      }
    },
    regional_monthly_Obj(param, fress_name) {
      regional_monthly_payment_check(param).then((res) => {
        var datatime = param.date * 1000;
        const formattedDate = this.formatDateFromTimestamp(datatime);
        if (res.data == 1) {
          this.$notify({
            dangerouslyUseHTMLString: true,
            message: `<div style="display:flex;">
                                <i class="el-icon-warning" style="font-size:20px;color:red;margin:0px 6px 0px 0px"></i>
                                <div style="color:#595554">${formattedDate}${fress_name.name}已经申请过付款，请核实申请是否有误<div>
                                </div>`,
            duration: 0,
            showClose: false,
            offset: 30,
            customClass: "customClass_list",
          });
        } else {
        }
      });
    },
    regional_monthly_Obj_Data(param, fress_name) {
      regional_monthly_payment_check(param).then((res) => {
        var datatime = param.date * 1000;
        const formattedDate = this.formatDateFromTimestamp(datatime);
        if (res.data == 1) {
          this.$notify({
            dangerouslyUseHTMLString: true,
            message: `<div style="display:flex;">
                                <i class="el-icon-warning" style="font-size:20px;color:red;margin:0px 6px 0px 0px"></i>
                                <div style="color:#595554">${formattedDate}${fress_name.name}已经申请过付款，请和申请人了解具体情况后再审批<div>
                                </div>`,
            duration: 0,
            showClose: false,
            offset: 30,
            customClass: "customClass_list_tow",
          });
        } else {
        }
      });
    },
    formatDateFromTimestamp(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");

      // 格式为：年-月-日
      return `${year}年${month}月`;
    },
    reapplyPay() {
      if (this.formdata.share_type == 0) {
        let total = 0;
        for (let i = 0; i < this.formdata.share.length; i++) {
          total += Number(this.formdata.share[i]["share_content"]);
        }
        this.formdata.expenditure_list.forEach((item) => {
          item.date = timestamp10(item.date) + "";
        });
        if (
          total * 1 == this.formdata.apply_money * 1 &&
          this.formdata.charge_off_money * 1 <= this.formdata.apply_money * 1
        ) {
          var param = {
            ...this.formdata,
            is_initiate_audi: 0 + "", //1是审核0不是审核
            pay_time: timestamp10(this.formdata.pay_time),
            expenditure_list: this.formdata.expenditure_list,
          };
          paymentApplyCreate(param).then((res) => {
            if (res.code == 10000) {
              this.open2("创建付款申请成功", "success");
              this.cancellation();
            } else {
              this.open2("创建付款申请失败", "warning");
            }
          });
        } else {
          if (total * 1 != this.formdata.apply_money * 1) {
            this.open2("分摊金额等于付款金额", "warning");
          } else {
            this.open2("使用的冲抵备用金不能超过付款金额", "warning");
          }
        }
      } else if (this.formdata.share_type * 1 == 1) {
        let total = 0;
        for (let i = 0; i < this.formdata.share.length; i++) {
          total += Number(this.formdata.share[i]["share_content"]);
        }
        this.formdata.expenditure_list.forEach((item) => {
          item.date = timestamp10(item.date) + "";
        });
        if (total == "100") {
          var param = {
            ...this.formdata,
            is_initiate_audi: 0 + "", //1是审核0不是审核
            pay_time: timestamp10(this.formdata.pay_time),
            expenditure_list: this.formdata.expenditure_list,
            id: "",
          };
          paymentApplyCreate(param).then((res) => {
            if (res.code == 10000) {
              this.open2("创建付款申请成功", "success");
              this.cancellation();
            } else {
              this.open2("创建付款申请失败", "warning");
            }
          });
        } else {
          if (total != "100") {
            this.open2("分摊比例为100%", "warning");
          } else {
            this.open2("使用的冲抵备用金不能超过付款金额", "warning");
          }
        }
      }
    },
    searchCustomerList(query) {
      if (query !== "") {
        var param = {
          body_belong: "3",
          invoice_body_name: query,
        };
      }
      finance_invoice_book_options(param).then((res) => {
        this.formdata.payee = query;
        if (res.code == 10000) {
          this.clientList = res.data;
        }
      });
    },
    selectedCustomer(value) {
      var clientdata = this.clientList.find((item) => item.id == value);
      if (clientdata) {
        this.formdata.payee = clientdata.invoice_body_name;
        this.formdata.receive_bank = clientdata.bank_of_deposit;
        this.formdata.receive_account = clientdata.account_no;
      } else {
      }
    },
    PassAuditturn() {
        this.dialogturn = true
      },
      showMsgfromChild(data) {
        console.log(data, " this.$emit('listenToChildEvent',this.datalist)")

        if (data.resstatus == 1) {
          this.record_process_detailObj()
          this.$router.go(-1);
        } else {

        }
        this.dialogturn = false
      },
      customDiagosis() {
        this.customerData = {
          customer_id:this.formdata.relation_id,
          search_time:this.formdata.expenditure_list[0].date,
          diagnosis:true 
        }
      },
      fatherMethodHandle() {
        this.customerData = {
          customer_id:this.formdata.relation_id,
          search_time:this.formdata.expenditure_list[0].date,
          diagnosis:false
        }
      }
  },
  beforeDestroy() {
    this.$notify.closeAll();
  },
};
</script>
<style lang="less" scoped>
  
.customClass_list {
  width: 500px !important;
  background: #fff1f0;
  border: 1px solid #ffbdb9;
  height: 61px;
}

.customClass_list_tow {
  width: 600px !important;
  background: #fff1f0;
  border: 1px solid #ffbdb9;
  height: 61px;
}
</style>
<style scoped lang="less">
.el-table__body {
  width: 100%;
  table-layout: fixed !important;
}
/deep/ .uploadList .el-upload--picture-card,
/deep/ .uploadList .el-upload-list__item {
  width: 98px;
  height: 98px;
  line-height: 100px;
}
/deep/ .receiptManageadd_form_details .el-form-item--mini .el-form-item__label {
  line-height: 6px;
  /* font-weight: bold; */
}
.receiptManageadd_form_details .row_height_of {
  /* height: 70px; */
   /* display: none; */
   height: initial;
   /* font-weight: bold; */
   font-size: 15px;
   /* margin-bottom:20px ; */
}
/deep/ .receiptManageadd_form_details .el-form-item__content  {
   font-weight: bold;
 }
 /deep/ .receiptManageadd_form_creation .el-form-item--mini .el-form-item__label {
  line-height: 6px;
}
.footerType {
  position: fixed;
  background: #ffffff;
  margin: 10px 10px 10px 10px;
  padding: 10px;
  border-radius: 10px;
  width: calc(100% - 225px);
  z-index: 100;
  bottom: -1.5%;
}

.paymentReqAdddata {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin: 10px;
}

.paymentReqAddThree {
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  margin: 5px;
}

.rule_title {
  display: flex;
  align-items: center;
  padding-bottom: 18px;
  padding-top: 8px;
  font-size: 14px;
  font-weight: bold;
  justify-content: space-between;

  .title-l {
    display: flex;
    align-items: center;
  }

  .icon_left {
    display: inline-block;
    width: 6px;
    height: 16px;
    background: #f1a357;
    margin-right: 6px;
  }
}

.remodername .number {
  height: 20px;
  display: block;
}

.remodername:hover .number {
  display: none;
}

.remodername .remodercenter {
  display: none;
  color: #161414;
}

.remodername:hover .remodercenter {
  height: 20px;
  display: block;
  color: #262424;
  text-align: center;
  font-size: 10px;
  padding: 5px 0px 0px 0px;
  /* margin-top: 5px; */
}

.row_height_of {
  height: 90px;
}
</style>